<template>
  <div>
    <div class="chart-period-setting">
      <el-tooltip
        class="chart-tooltip"
        effect="dark"
        content="设置要求的考核时长，可选择为“N1天”、“N2天”…等多个时长，例如统计在30天、90天内发生第2次维修，则设置为30天、90天。图表根据其分别统计数据点，并分别显示为多条折线。"
        placement="bottom"
      >
        <i class="iconfont icon-jieshishuoming1"></i>
      </el-tooltip>
      <el-button @click="showDialog">重复考核时长</el-button>
    </div>

    <!-- 关单周期设置弹出框 -->
    <el-dialog
      title="设置周期"
      :visible.sync="dialogVisible"
      width="648px"
      class="close-dialog"
    >
      <div class="dialog-content">
        <div class="dialog-content-label">设置报表计算具体分段周期</div>
        <div>
          <div
            v-for="(item, index) in periodArr"
            :key="index"
            class="el-form-item-line"
          >
            <span class="el-form-item-line-index">{{ index + 1 }}.</span>
            <el-input
              maxlength="4"
              v-model="periodArr[index]"
              v-only-number="{ max: 9999, min: 0, precision: 0 }"
            ></el-input>
            <span>天</span>
            <i
              v-if="periodArr.length !== 1"
              class="el-icon-remove"
              @click="reduceList(index)"
            ></i>
            <i
              v-if="index + 1 === periodArr.length && index < 9"
              class="el-icon-circle-plus"
              @click="addList"
            ></i>
          </div>
          <div>注：4字符以内。最多10条。</div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button @click="save" type="primary">保存 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';
import Platform from '@src/util/platform.ts';

export default {
  props: {
    chartOption: {
      type: Object,
    },
  },
  emit: ['fetchChartData'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);

    // todo 需要和后端对接重命名
    const periodArr = ref([30, 90]);

    const showDialog = () => {
      dialogVisible.value = true;

      if (Object.keys(props.chartOption).length > 0) {
        periodArr.value = props.chartOption;
      } else {
        periodArr.value = [30, 90];
      }
    };

    const reduceList = index => {
      const arr = periodArr.value;
      periodArr.value = [
        ...arr.slice(0, index),
        ...arr.slice(index + 1, arr.length),
      ];
    };

    const addList = () => {
      periodArr.value.push(null);
    };

    // Todo 暂且先这样校验
    const validate = () => {
      let valid = true;
      periodArr.value.forEach(item => {
        if (!(item || item === 0)) {
          valid = false;
        }
      });

      return valid;
    };

    const save = () => {
      const valid = validate();
      if (valid) {
        dialogVisible.value = false;

        emit('fetchChartData', periodArr.value);
      } else {
        return Platform.alert('输入框不能为空');
      }
    };

    const refresh = () => {
      periodArr.value = [30, 90];
    };

    return {
      dialogVisible,
      periodArr,
      showDialog,
      reduceList,
      addList,
      save,
      refresh,
    };
  },
};
</script>

<style lang="scss" scoped>
.chart-period-setting {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  i {
    color: #afb5b3;
  }

  .el-button {
    width: 120px;
    margin-left: 10px;
    margin-right: 5%;
  }
}
.close-dialog {
  .dialog-content {
    display: flex;

    .dialog-content-label {
      width: 200px;
    }

    .el-form-item-line {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      .el-input {
        width: 80px;
        margin: 0 10px;
      }

      i {
        margin: 0 -5px 0 10px;
        font-size: 18px;
        cursor: pointer;
        color: #f56c6c;
      }

      .el-icon-circle-plus {
        color: $color-primary-light-6;
        margin-left: 10px;
      }
    }
  }
}
</style>
